<template>
  <div class="markdown-container">
    <div class="container">
      <mavon-editor
        v-if="disabled"
        ref="md"
        v-model="myValue"
        placeholder="请输入文档内容..."
        :box-shadow="false"
        :toolbars="toolbars"
        style="min-height: 600px;z-index:1;border: 1px solid #d9d9d9;height:50vh;width: 100%"
        @imgAdd="$imgAdd"
        @change="change"
      />
      <mavon-editor
        v-else
        class="md"
        :value="myValue"
        :subfield="false"
        :default-open="'preview'"
        :toolbars-flag="false"
        :editable="false"
        :scroll-style="true"
        :ishljs="true"
      />
    </div>
  </div>
</template>

<script>
import { uploadMarkDownImg, getFileAccessHttpUrl } from '@/api/manage'
import {mapGetters} from "vuex";

export default {
  name: 'AntsMarkDown',
  props: {
    viewValue: {
      type: String,
      required: false
    },
    triggerChange: {
      type: Boolean,
      default: false,
      required: false
    },
    disabled: {
      type: Boolean,
      default: true,
      required: false
    }
  },
  data: function() {
    return {
      myValue: this.viewValue,
      html: '',
      url: {
        upload: '/sys/common/articleUpload'
      },
      toolbars: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        strikethrough: true, // 中划线
        mark: true, // 标记
        superscript: true, // 上角标
        subscript: true, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        code: true, // code
        table: true, // 表格
        fullscreen: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        htmlcode: true, // 展示html源码
        help: true, // 帮助
        /* 1.3.5 */
        undo: true, // 上一步
        redo: true, // 下一步
        trash: true, // 清空
        save: true, // 保存（触发events中的save事件）
        /* 1.4.2 */
        navigation: true, // 导航目录
        /* 2.1.8 */
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        /* 2.2.1 */
        subfield: true, // 单双栏模式
        preview: true, // 预览
      }
    }
  },
  watch: {
    viewValue(newValue) {
      this.myValue = (newValue == null ? '' : newValue)
    },
    myValue(newValue) {
      if (this.triggerChange) {
        this.$emit('change', newValue)
      } else {
        this.$emit('input', newValue)
        this.$emit('inputHtml', this.html)
      }
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  mounted() {
  },
  methods: {
    // 将图片上传到服务器，返回地址替换到md中
    $imgAdd(pos, $file) {
      var formdata = new FormData()
      formdata.append('file', $file)
      formdata.append('biz', 'article-details')
      formdata.append('username', this.name)
      // formdata.append('jeditor', '1')
      uploadMarkDownImg(this.url.upload, formdata).then(res => {
        const imgUrl = getFileAccessHttpUrl(res.message)
        this.$refs.md.$img2Url(pos, imgUrl)
      })
    },
    change(value, render) {
      // render 为 markdown 解析后的结果
      this.html = render
    }
  }
}
</script>
